<template>
  <div v-if="visible">
    <div class="moon-dialog-overlay" @click="onClickOverlay"></div>
    <div class="moon-dialog-wrapper">
      <div class="moon-dialog">
        <header>
          <slot name="title" />
          <span @click="close" class="moon-dialog-close"></span>
        </header>
        <main>
          <slot name="content" />
        </main>
        <footer>
          <moon-button level="main" @click="clickOk">确认</moon-button>
          <moon-button @click="clickCancel">取消</moon-button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
import MoonButton from '../lib/MoonButton'
export default {
  components: {
    MoonButton
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    },
    ok: {
      type: Function
    },
    cancel: {
      type: Function
    }
  },
  methods: {
    close() {
      this.$emit('closeEvent')
    },
    onClickOverlay() {
      if (this.closeOnClickOverlay) {
        this.close()
      }
    },
    clickOk() {
      if (this.ok?.() !== false) {
        this.close()
      }
    },
    clickCancel() {
      if (this.cancel) {
        this.cancel()
      }
      this.close()
    }
  }
}
</script>

<style lang="scss">
$radius: 4px;
$border-color: #d9d9d9;

.moon-dialog {
  background: white;
  border-radius: $radius;
  box-shadow: 0 0 3px fade_out(black, 0.5);
  min-width: 350px;
  max-width: 90%;

  &-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: fade_out(black, 0.5);
    z-index: 10;
  }
  &-wrapper {
    position: fixed;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    z-index: 11;
  }
  > header {
    padding: 12px 16px;
    border-bottom: 1px solid $border-color;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }

  > main {
    padding: 12px 16px;
    color: #99a1ab;
    font-size: 16px;
  }

  > footer {
    border-top: 1px solid $border-color;
    padding: 12px 16px;
    text-align: right;
  }
  &-close {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;

    &::before,
    &::after {
      content: '';
      position: absolute;
      height: 1px;
      background: black;
      width: 100%;
      top: 50%;
      left: 50%;
    }
    &::before {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(45deg);
    }
  }
}
</style>
